<template>
  <div class="userData">
    <PageTitle title="用户信息"></PageTitle>
    <van-form @submit="onSubmit" :submit-on-enter="false" v-if="loginUser">
      <div class="header">
        <div class="ava">
          <label for="upload">
            <img :src="avatar" />
            <div class="editIcon">
              <van-icon name="edit"></van-icon>
            </div>
          </label>
          <input type="file" accept="image/*" id="upload" @input="uploadAva" />
        </div>
      </div>
      <div class="wrap">
        <van-field
          v-model="loginUser.uid"
          label="ID号"
          name="uid"
          input-align="right"
          disabled
          clickable
          ref="ID号"
          @click="copyContent('ID号')"
        />
        <van-field
          v-model="loginUser.phone"
          label="手机号"
          name="phone"
          input-align="right"
          disabled
          clickable
          ref="手机号"
          @click="copyContent('手机号')"
        />
        <van-field
          v-model="nickname"
          label="修改昵称"
          placeholder="请输入昵称"
          name="nickname"
          ref="nickname"
          clickable
          clearable
          @click="$refs.nickname.focus()"
          input-align="right"
          error-message-align="right"
          :rules="[{ required: true, message: '昵称不能为空' }]"
        />
        <van-cell
          title="修改密码"
          is-link
          @click="$router.push('/my/editPassword')"
        />
      </div>
      <div class="bottomBtn">
        <van-button round block type="info" native-type="submit" color="#25c9c3"
          >保存修改</van-button
        >
        <van-button
          round
          block
          type="info"
          @click.prevent="loginOut"
          color="#25c9c3"
          plain
          >退出登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import { mapGetters } from "vuex";
export default {
  name: "UserData",
  data() {
    return {
      nickname: null,
      avatar: null,
    };
  },
  components: {
    PageTitle,
  },
  computed: {
    ...mapGetters(["loginUser"]),
  },
  created() {
    if (!this.loginUser) {
      this.$router.push("/login");
      return;
    }
    this.nickname = this.loginUser.nickname;
    this.avatar = this.loginUser.avatar;
  },
  methods: {
    loginOut() {
      this.$axios.get("/api/logout").then((d) => {
        console.log("logout", d.data);
        this.$store.commit("loginOut");
        this.$toast.success({
          message: "退出登录成功",
          onOpened: () => {
            this.$router.push("/");
          },
        });
      });
    },
    uploadAva(e) {
      var file = e.target.files[0];
      if (file.type.indexOf("image") == 0) {
        let param = new FormData();
        param.append("file", file);
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "上传中...",
        });
        this.$axios
          .post("/api/upload/image", param, {
            headers: { "Content-Type": "multipart/form-data" },
          })
          .then((d) => {
            console.log("upload/image", d.data);
            this.$toast.clear();
            if (d.data.status == 200) {
              this.avatar = d.data.data.url;
            } else {
              this.$toast.fail(d.data.msg);
            }
          });
      }
    },
    onSubmit() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "保存中...",
      });
      this.$axios
        .post("/api/user/edit", {
          avatar: this.avatar,
          nickname: this.nickname,
        })
        .then((d) => {
          console.log("user/edit", d.data);
          if (d.data.status == 200) {
            this.$toast.success("保存成功");
          } else {
            this.$toast.fail(d.data.msg);
          }
        });
    },
    copyContent(type) {
      let vc = this.$refs[type];
      if (!vc) return;
      let input = vc.$el.getElementsByTagName("input")[0];
      if (!input) return;
      input.disabled = false;
      input.select();
      input.setSelectionRange(0, 9999);
      if (document.execCommand("Copy")) {
        this.$toast("已复制" + type);
      }
      input.setSelectionRange(0, 0);
      input.disabled = true;
    },
  },
};
</script>

<style lang="less" scoped>
.userData {
  .header {
    height: 230px;
    background: linear-gradient(
      #fff 5%,
      rgba(255, 255, 255, 0.1) 40%,
      rgba(0, 0, 0, 0.2)
    );
    position: relative;
    @w: 75px;
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -90px;
      z-index: 1;
      height: 180px;
      width: 100%;
      border-radius: 50% 50% 0 0;
      background: #fcfcfd;
    }
    .ava {
      width: @w * 2;
      height: @w * 2;
      border-radius: 50%;
      border: 5px solid #fcfcfd;
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 50px;
      transform: translateX(-50%);
      label {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
          background: #fff;
        }
        .editIcon {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          background: #25c9c3;
          border: 2.5px solid #fff;
          position: absolute;
          right: 10px;
          bottom: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          .van-icon {
            font-size: 20px;
            color: #fff;
          }
        }
      }
      input {
        display: none;
      }
    }
  }
  .wrap {
    width: 85%;
    margin: auto;
    border-radius: 10px;
    background: #fff;
    padding: 5px;
    margin-top: -10px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 3;
    .van-field,
    .van-cell {
      border-radius: 10px;
    }
  }
  .bottomBtn {
    .van-button {
      width: 85%;
      margin: 15px auto;
    }
  }
}
</style>